<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script src="../topojson.min.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      (async ()=>{
        let data = await d3.json('data/china-topo.json') ;
        console.log(data);
        data = topojson.feature(data , data.objects['china-geo'])
        console.log(data);

        const path = d3.geoPath();

        const projection = d3.geoMercator()
          //.fitSize([width,height],data)  
          .fitExtent([[50,50],[width-50,height-50]],data)

        path.projection(projection)

        const d = path(data);
        
        svg
          //.append('g').attr('transform','scale(10,-10) translate(-60,-60)')
          .append('path')
          .attr('d',d)
          .attr('fill','none')
          .attr('stroke','#ccc')
          .attr('stroke-width',1)

      })()


    </script>
  </body>
</html>
